<template>

  <div style="margin-top: 40px">
    <!-- main -->
    <div class="main">
      <div class="main-container" style="margin-left: 0px">
        <div class="container">
          <div class="location clearfix">
            <router-link :to="{ name: 'indexList'}">首页</router-link>
            <router-link :to="{ name: 'myDoc'}">我的资料</router-link>
            <a href="javascript:;">添加资料</a>
          </div>

          <div class="article-container">
            <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="100px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="资料名称" prop="title">
                    <el-input v-model="postForm.title" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资料分类" prop="docType">
                    <dic-catalog-tree v-model="postForm.docType" dic-code="document_type" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">

                  <el-form-item label="资料来源" prop="docFrom">
                    <el-input v-model="postForm.docFrom" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关键字" prop="keyWord">
                    <el-input v-model="postForm.keyWord" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上传附件" prop="fileUrl">
                    <file-upload v-model="postForm.fileUrl" :limit="1" :accept="accept" list-type="file" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资料简介" prop="remarks">
                    <el-input v-model="postForm.remarks" type="textarea" :rows="5" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <div style="margin-top: 20px">
                  <el-button native-type="button" style="background-color:#01CB94;color: #fff " @click="submitForm">保存</el-button>
                  <el-button type="info" @click="onCancel">返回</el-button>
                </div>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!-- main end -->
  </div>

</template>

<script>

import EmptyView from '@/components/EmptyView/index'
import DicCatalogTree from '@/components/DicTreeSelect'
import FileUpload from '@/components/FileUpload'
import { saveData, fetchDetail } from '@/api/document/document'

export default {
  components: { EmptyView, DicCatalogTree, FileUpload },
  data() {
    return {
      dialogVisible: false,
      excludes: [],
      curIndex: 0,
      accept: '.doc, .docx, .xls, .xlsx, .ppt, .pptx',
      postForm: {
        id: '',
        title: '',
        docType: '',
        docForm: '',
        remarks: ''
      },
      tableData: [
        { title: '默认文件夹', fileList: [{ title: '第一个文件夹', fileType: '视频文件' }] }
      ],
      loading: false,
      rules: {
        title: [
          { required: true, message: '资料名称不能为空！' }
        ],
        docType: [
          { required: true, message: '资料类别不能为空！' }
        ],
        fileUrl: [
          { required: true, message: '附件不能为空！' }
        ]

      }
    }
  },

  created() {
    // 文档ID
    const id = this.$route.params.id
    this.fetchData(id)
  },
  methods: {
    submitForm() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        const loading = this.$loading({
          lock: true,
          text: '正在提交转换附件，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        saveData(this.postForm).then(() => {
          this.$notify({
            title: '成功',
            message: '资料保存成功！',
            type: 'success',
            duration: 2000
          })
          loading.close()
          this.$router.push({ name: 'myDoc' })
        })
      })
    },
    fetchData(id) {
      fetchDetail(id).then(res => {
        this.postForm = res.data
      })
    },

    onCancel() {
      this.$router.push({ name: 'myDoc' })
    }
  }
}
</script>
<style>

.el-upload-dragger .el-icon-upload{
  color:#01CB94
}
</style>
